<template>
  <el-form class="demo-form-inline" label-width="100px">
    <el-form-item label="SPU名称">{{spu.spuName}}
    </el-form-item>
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="价格(元)" type="number"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input placeholder="重量(千克)" type="number"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input type="textarea" placeholder="规格描述" rows="4"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="100px">
        <el-form-item label="小米">
          <el-select value="" placeholder="">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分公司">
          <el-select value="" placeholder="">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true" label-width="100px">
        <el-form-item label="颜色">
          <el-select value="" placeholder="">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table
        border
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="图片"
          width="width">
          <template slot-scope="scope"></template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="width">
        </el-table-column>
        <el-table-column
          prop="address"
          width="width"
          label="操作"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button @click="$emit('update:visible',false)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      category1Id:"",
      category2Id:"",
      category3Id: "",
      spu:[],
      attrList:[],
      spuSaleAttrList:[],
      spuImageList:[]
    }
  },
  methods: {
    //copy过来的
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //初始化函数 当点击父组件的添加sku按钮 触发此函数
     async getAttrInfoList(row,category1Id, category2Id) {
       this.spu = row
       // 获取平台属性列表
       //http://localhost:9529/dev-api/admin/product/attrInfoList/1/1/1
       let promise1 = this.$API.attr.getAttrList(category1Id, category2Id, row.category3Id)
       // 获取spu的销售属性列表
       //http://localhost:9529/dev-api/admin/product/spuSaleAttrList/1990
       let promise2 = this.$API.sku.getSpuSaleAttrList(row.id)
       // 获取spu的图片列表  （因为sku的图片列表是从spu的图片列表当中选择而来的）
       //http://localhost:9529/dev-api/admin/product/spuImageList/1990
       let promise3 = this.$API.sku.getSpuImageList(row.id)
       /* Promise.all  是个方法
        功能： 并发处理多个promise
        参数： 数组  promise对象的数组
       返回值： promise对象
               成功（数组中所有的promise对象都成功） 所有的promise成功的结果组成的数组
               失败（数组中只要有一个promise对象失败就失败） 第一个失败的promise失败的原因*/
       const result = await Promise.all([promise1, promise2, promise3])
       this.attrList = result[0].data
       this.spuSaleAttrList = result[1].data
       let spuImageList = result[2].data
       spuImageList.forEach(item => item.isDefault = '0')//0表示这是默认 在获取数据的时候就添加上isDefault属性
       this.spuImageList = spuImageList
    }
  }
}
</script>

<style lang="less" scoped>

</style>
